<template>
 
    <div class="editorContent">
       <div class="editoer1">
       	 <p>写文章</p>
       	 <div class="article">
       	    <div class="articleTitle">
                <input type="text" v-model= "articleTitle" placeholder="请在这里输入文章标题">
       	    </div>
       	    <div class="artface">
       	    	<div class="artfaceC">
       	    	   <p>上传文章封面</p>
       	    	  
	                <el-upload
					  class="avatar-uploader"
					  :action= "fastDfsUrl"
					  :show-file-list="false"
					  :headers="myHeaders"
					  :name="name"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>

				</div>
       	    </div>
            <div id="editor" class="editor"></div>
            <div class="articleType">
            	分类:
            	<el-select v-model="value" placeholder="请选择">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
            </div>

            <div class="report">
               <el-button type="primary" style="margin-right:10px;display:inline-block;padding:6px 15px" @click= "sure()">确定</el-button>
               <el-button type="info" style="margin-right:20px;display:inline-block;padding:6px 8px">取消</el-button>
            </div>
          </div>   
       </div>
       <blogContentRight></blogContentRight>      
    </div>
   
</template>
 <style scoped>
 .avatar-uploader{
 	margin-left: 20px
 }
 .artfaceC>p{
 	font-weight: bold;
 	font-size: 18px;
 	color: #555
 }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 158px;
    height: 158px;
    line-height: 158px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 158px;
    height: 158px;
    display: block;
  }
    .artfaceC{
    	padding: 5px 10px;
    	display: flex;
    }
    .artface{
    	margin-top: 20px;
    	
    	height: 180px;
    	line-height: 180px;
    	width: 100%;
    	border: 1px dashed #CCC 
    }
    .report{
    	 border:1px solid #DDD;
        border-top: none;
        padding: 10px;
    	text-align:left;
    }
    .articleType{
    	position: relative;    	
    	text-align: left;
    	background: #F2F2F2;
    	padding:5px 10px;
        border:1px solid #DDD;
        border-top: none
    }

 	.editorContent{
 		width: 1120px;
	    margin: 20px auto;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    padding-top: 120px;
 	}
 	.editoer1{
 		width: 70%;
 		background-color: white;
 		border-radius: 4px;
 		overflow: hidden;
 	}
 	.editoer1>p{
 		height: 46px;
 		line-height: 46px;
 		font-size: 16px;
 		font-weight: bold;
 		text-align: left;
 		padding-left: 10px;
 		background: rgb(255,255,228);
 	}

 	.article{
 		padding: 10px;
 		
 	}
 	.articleTitle>input{
 		color: rgb(0, 0, 0);
	    display: block;
	    height: 30px;
	    font-size: 26px;
	    padding: 5px 0;
	    border: 1px solid transparent;
	    background: transparent;
	    width: 100%;
	    text-align: center;
	    border: 1px dashed #CCC;
 	}
 	#editor{
 		margin-top: 20px
 	}

 </style>
<script>
  import blogContentRight from './blogContentRight'
  import E from 'wangeditor'

  export default {
    name: 'App',
    data () {
        return {
	        options: [{
	          value: '1',
	          label: '前端'
	        }, {
	          value: '后台',
	          label: '后台'
	        }, {
	          value: '设计',
	          label: '设计'
	        }, {
	          value: '生活',
	          label: '生活'
	        }, {
	          value: '艺术',
	          label: '艺术'
	        }],
	        value: '前端',
	        imageUrl: '',
	        editorContent: '',
	        articleTitle: '',
	        blogType: '',
	        fastDfsUrl:this.fastdfsurl,
	        myHeaders: {requestType: "zuul"},
	        name:"fileList"
	      }
    },
    mounted () {
        this.initEditor();
    },
    methods:{
	    initEditor(){  

	        var editor = new E('#editor');
	        editor.customConfig.onchange = (html) => {
	          this.editorContent = html;
	        }
	        editor.create();
	    },
	     handleAvatarSuccess(res, file) {
	     	if(res.code == 200){
	     		
	     		 this.imageUrl = res.data.fullPath;
	     	}else{
	     		this.$message({
		          message: '封面图片上传失败',
		          error: 'warning'
		        });
	     	}
	      },
	      beforeAvatarUpload(file) {
	        const isJPG = file.type === 'image/jpeg';
	        const isLt2M = file.size / 1024 / 1024 < 2;

	        if (!isJPG) {
	          this.$message.error('上传头像图片只能是 JPG 格式!');
	        }
	        if (!isLt2M) {
	          this.$message.error('上传头像图片大小不能超过 2MB!');
	        } 
	        return isJPG && isLt2M;
	      },
	      sure() { 
	      	 var self = this;

	      	 if(!self.articleTitle){
                this.$message({
		          message: '文章标题不能为空！',
		          type: 'warning'
		        });
	      	 }else if(!self.imageUrl){
	      	 	this.$message({
		          message: '请上传文章封面图！',
		          type: 'warning'
		        });
	      	 }else if(!self.editorContent){
                this.$message({
		          message: '文章内容不能为空！',
		          type: 'warning'
		        });  
	      	 }else{

		      	 if(self.imageUrl.indexOf("127.0.0.1") != -1){
		      	 	 this.sure();
		      	 }else{
                   
		      	 	 let param = {
			      	 	blogTitle: self.articleTitle,
			      	 	blogText: self.editorContent,
			      	 	blogType: self.value,
			      	 	blogAuthor : '1',	 
			      	 	coverImg: self.imageUrl,
			      	 	watchNum: 0   	 	
		      	    };
               
		      	    this.$http({
	                     method: "post", 
	                     url: this.url +'/articles',
	                     data:param
		      	    })
		      	     .then(res => {
                          if(res.data.code == 200){
                          	  this.$message({
						          message: '上传成功',
						          type: 'success'
						       });

                          	 this.$router.push({path:'/'})
                          }else{
                              this.$message({
						          message: '上传失败',
						          type: 'error'
						       });
                          }
		      	     }).catch((err) => {
                          this.$message({
						          message: '上传失败',
						          type: 'error'
						   });  
		      	     })
		      	 }
	      	 }
         }
    },
    components: {
       blogContentRight: blogContentRight
    }
  }
</script>